React useFormStatus: ফর্ম জমা দেওয়ার অগ্রগতি ট্র্যাকিং এ দক্ষতা অর্জন

আধুনিক ওয়েব ডেভেলপমেন্টে, ফর্ম জমা দেওয়ার সময় ব্যবহারকারীকে একটি নির্বিঘ্ন এবং তথ্যপূর্ণ অভিজ্ঞতা প্রদান করা অত্যন্ত গুরুত্বপূর্ণ। React-এর useFormStatus হুক, যা React 18-এ প্রবর্তিত হয়েছে, একটি ফর্মের জমা দেওয়ার অবস্থা ট্র্যাক করার জন্য একটি শক্তিশালী এবং সুন্দর সমাধান প্রদান করে। এই বিশদ নির্দেশিকাটি useFormStatus-এর জটিলতা, এর কার্যকারিতা, ব্যবহারের ক্ষেত্র এবং আকর্ষক ও প্রতিক্রিয়াশীল ফর্ম ইন্টারঅ্যাকশন তৈরির জন্য সেরা অনুশীলনগুলি নিয়ে আলোচনা করবে।

React useFormStatus কী?

useFormStatus হলো একটি React হুক যা একটি ফর্ম জমা দেওয়ার অবস্থা সম্পর্কে তথ্য প্রদানের জন্য ডিজাইন করা হয়েছে। এটি জমা দেওয়ার অগ্রগতি পরিচালনা এবং প্রদর্শন, ত্রুটি সামলানো এবং সেই অনুযায়ী UI আপডেট করার প্রক্রিয়াকে সহজ করে। এর প্রবর্তনের আগে, ডেভেলপাররা প্রায়শই ম্যানুয়াল স্টেট ম্যানেজমেন্ট এবং অ্যাসিঙ্ক্রোনাস অপারেশনের উপর নির্ভর করত, যা জটিল এবং ত্রুটিপূর্ণ কোডের কারণ হতে পারত।

এই হুকটি নিম্নলিখিত বৈশিষ্ট্যসহ একটি অবজেক্ট রিটার্ন করে:

• pending: একটি বুলিয়ান মান যা নির্দেশ করে যে ফর্মটি বর্তমানে জমা হচ্ছে কিনা।
• data: ফর্ম দ্বারা জমা দেওয়া ডেটা, যদি উপলব্ধ থাকে।
• method: ফর্ম জমা দেওয়ার জন্য ব্যবহৃত HTTP মেথড (যেমন, "POST", "GET")।
• action: যে ফাংশন বা URL ফর্ম জমা দেওয়ার কাজটি পরিচালনা করে।
• error: জমা ব্যর্থ হলে একটি এরর অবজেক্ট। এটি আপনাকে ব্যবহারকারীকে ত্রুটির বার্তা প্রদর্শন করতে দেয়।

কেন useFormStatus? সুবিধা এবং উপকারিতা

useFormStatus ব্যবহার করার বেশ কিছু মূল সুবিধা রয়েছে:

• সরলীকৃত ফর্ম স্টেট ম্যানেজমেন্ট: এটি ফর্ম জমা দেওয়ার অবস্থার ব্যবস্থাপনাকে কেন্দ্রীভূত করে, বয়লারপ্লেট কোড কমায় এবং রক্ষণাবেক্ষণযোগ্যতা উন্নত করে।
• উন্নত ব্যবহারকারীর অভিজ্ঞতা: ব্যবহারকারীকে জমা দেওয়ার অগ্রগতি জানানোর একটি স্পষ্ট এবং সামঞ্জস্যপূর্ণ উপায় প্রদান করে, যা ব্যস্ততা বাড়ায় এবং হতাশা কমায়।
• উন্নত ত্রুটি ব্যবস্থাপনা: ত্রুটি সনাক্তকরণ এবং রিপোর্টিং সহজ করে, জমা দেওয়ার ব্যর্থতা সুন্দরভাবে পরিচালনা করার সুযোগ দেয়।
• ডিক্লারেটিভ অ্যাপ্রোচ: একটি আরও ডিক্লারেটিভ কোডিং শৈলীকে উৎসাহিত করে, যা কোড পড়া এবং বোঝা সহজ করে তোলে।
• সার্ভার অ্যাকশনের সাথে ইন্টিগ্রেশন: React সার্ভার অ্যাকশনের সাথে নির্বিঘ্নে একীভূত হয়, যা সার্ভার-রেন্ডার করা অ্যাপ্লিকেশনগুলিতে ফর্ম হ্যান্ডলিংকে আরও সহজ করে।

প্রাথমিক ব্যবহার: একটি সহজ উদাহরণ

আসুন useFormStatus-এর মৌলিক ব্যবহার বোঝানোর জন্য একটি সহজ উদাহরণ দিয়ে শুরু করা যাক।

প্রেক্ষাপট: একটি সাধারণ কন্টাক্ট ফর্ম

একটি সাধারণ কন্টাক্ট ফর্মের কথা ভাবুন যেখানে নাম, ইমেল এবং বার্তার জন্য ফিল্ড রয়েছে। আমরা চাই যে ফর্মটি জমা হওয়ার সময় একটি লোডিং ইন্ডিকেটর প্রদর্শিত হোক এবং জমা ব্যর্থ হলে একটি ত্রুটির বার্তা দেখানো হোক।

কোডের উদাহরণ

প্রথমে, আসুন একটি সাধারণ সার্ভার অ্যাকশন সংজ্ঞায়িত করি (এটি সাধারণত একটি পৃথক ফাইলে থাকে, তবে সম্পূর্ণতার জন্য এখানে অন্তর্ভুক্ত করা হয়েছে):

async function submitForm(formData) {
  'use server';
  // "পেন্ডিং" অবস্থা প্রদর্শনের জন্য একটি বিলম্ব সিমুলেট করুন।
  await new Promise(resolve => setTimeout(resolve, 2000));

  // একটি সম্ভাব্য ত্রুটি সিমুলেট করুন।
  const name = formData.get('name');
  if (name === 'error') {
    throw new Error('Simulated submission error.');
  }

  console.log('Form submitted successfully:', formData);
  return { message: 'Form submitted successfully!' };
}

এখন, আসুন useFormStatus ব্যবহার করে React কম্পোনেন্ট তৈরি করি:

'use client';

import { useFormStatus } from 'react-dom';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<h3>ব্যাখ্যা</h3>

<ul>
  <li>আমরা <code>'react-dom'</code> থেকে <code>useFormStatus</code> ইম্পোর্ট করি। লক্ষ্য করুন যে এটি একটি ক্লায়েন্ট কম্পোনেন্ট কারণ এটি একটি ক্লায়েন্ট-সাইড হুক ব্যবহার করছে।</li>
  <li>আমরা <code>ContactForm</code> কম্পোনেন্টের মধ্যে <code>useFormStatus()</code> কল করে <code>pending</code>, <code>data</code>, এবং <code>error</code> ভ্যালুগুলো পাই।</li>
  <li>ফর্মটি জমা হওয়ার সময় সাবমিট বোতামটি নিষ্ক্রিয় করতে এবং "Submitting..." বার্তা প্রদর্শন করতে <code>pending</code> ভ্যালু ব্যবহার করা হয়।</li>
  <li>যদি একটি <code>error</code> ঘটে, তবে তার বার্তাটি একটি লাল অনুচ্ছেদে প্রদর্শিত হয়।</li>
  <li>যদি সার্ভার অ্যাকশন থেকে <code>data</code> রিটার্ন করা হয়, আমরা একটি সফল বার্তা প্রদর্শন করি।</li>
</ul>

<h2>উন্নত ব্যবহার এবং কৌশল</h2>

<p>মৌলিক উদাহরণের বাইরেও, <code>useFormStatus</code> আরও জটিল পরিস্থিতিতে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে এবং বিভিন্ন ফর্ম জমা দেওয়ার প্রয়োজনীয়তা পরিচালনা করতে ব্যবহার করা যেতে পারে।</p>

<h3>১. কাস্টম লোডিং ইন্ডিকেটর এবং অ্যানিমেশন</h3>

<p>একটি সাধারণ "Submitting..." টেক্সটের পরিবর্তে, আপনি আরও দৃষ্টিনন্দন অভিজ্ঞতা প্রদানের জন্য কাস্টম লোডিং ইন্ডিকেটর বা অ্যানিমেশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি স্পিনার কম্পোনেন্ট বা একটি პროგრେସ বার ব্যবহার করতে পারেন।</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... form fields ... */}
      <button type="submit" disabled={pending}>
        {pending ? <Spinner /> : 'Submit'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
    </form>
  );
}

function Spinner() {
  return <div>Loading...</div>; // আপনার স্পিনার কম্পোনেন্ট দিয়ে প্রতিস্থাপন করুন
}
</code>
</pre>

<h3>২. অপটিমিস্টিক আপডেট</h3>

<p>অপটিমিস্টিক আপডেট ব্যবহারকারীকে অবিলম্বে প্রতিক্রিয়া প্রদান করে, UI-কে এমনভাবে আপডেট করে যেন ফর্ম জমা সফল হয়েছে, এমনকি সার্ভার থেকে নিশ্চিতকরণ পাওয়ার আগেই। এটি আপনার অ্যাপ্লিকেশনের অনুভূত কর্মক্ষমতা উল্লেখযোগ্যভাবে উন্নত করতে পারে।</p>

<p><b>দ্রষ্টব্য:</b> অপটিমিস্টিক আপডেটের জন্য ত্রুটি ব্যবস্থাপনা এবং ডেটা সামঞ্জস্যতার বিষয়ে সতর্ক বিবেচনা প্রয়োজন। যদি জমা ব্যর্থ হয়, আপনাকে UI-কে তার পূর্ববর্তী অবস্থায় ফিরিয়ে আনতে হবে।</p>

<h3>৩. বিভিন্ন ত্রুটির পরিস্থিতি পরিচালনা করা</h3>

<p><code>useFormStatus</code> দ্বারা প্রত্যাবর্তিত <code>error</code> প্রপার্টি আপনাকে বিভিন্ন ত্রুটির পরিস্থিতি, যেমন বৈধতা ত্রুটি, নেটওয়ার্ক ত্রুটি এবং সার্ভার-সাইড ত্রুটি পরিচালনা করতে দেয়। আপনি ত্রুটির ধরণের উপর ভিত্তি করে নির্দিষ্ট ত্রুটির বার্তা প্রদর্শন করতে কন্ডিশনাল রেন্ডারিং ব্যবহার করতে পারেন।</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... form fields ... */}
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {error && error.message === 'Validation Error' && (
        <p style={{ color: 'red' }}>Please correct the validation errors.</p>
      )}
      {error && error.message === 'Network Error' && (
        <p style={{ color: 'red' }}>A network error occurred. Please try again later.</p>
      )}
      {error && error.message !== 'Validation Error' && error.message !== 'Network Error' && (
        <p style={{ color: 'red' }}>An unexpected error occurred.</p>
      )}
    </form>
  );
}
</code>
</pre>

<h3>৪. থার্ড-পার্টি ফর্ম লাইব্রেরির সাথে ইন্টিগ্রেশন</h3>

<p>যদিও <code>useFormStatus</code> ফর্ম জমা দেওয়ার অবস্থা ট্র্যাক করার একটি সহজ উপায় প্রদান করে, আপনি এটিকে Formik বা React Hook Form-এর মতো আরও ব্যাপক ফর্ম লাইব্রেরির সাথে একীভূত করতে চাইতে পারেন। এই লাইব্রেরিগুলি বৈধতা, ফর্ম স্টেট ম্যানেজমেন্ট এবং জমা দেওয়ার হ্যান্ডলিংয়ের মতো উন্নত বৈশিষ্ট্য সরবরাহ করে।</p>

<p>আপনি এই লাইব্রেরিগুলিকে আরও শক্তিশালী করতে <code>useFormStatus</code> ব্যবহার করতে পারেন, জমা দেওয়ার অগ্রগতি প্রদর্শন এবং ত্রুটিগুলি পরিচালনা করার জন্য একটি সামঞ্জস্যপূর্ণ উপায় প্রদান করে।</p>

<h3>৫. প্রোগ্রেস বার এবং শতাংশ</h3>

<p>দীর্ঘ সময় ধরে চলা ফর্ম জমা দেওয়ার জন্য, একটি প্রোগ্রেস বার বা শতাংশ প্রদর্শন করা ব্যবহারকারীকে মূল্যবান প্রতিক্রিয়া প্রদান করতে এবং তাদের নিযুক্ত রাখতে পারে। যদিও `useFormStatus` সরাসরি আপনাকে অগ্রগতি দেয় না, আপনি এটিকে একটি সার্ভার অ্যাকশনের সাথে একত্রিত করতে পারেন যা অগ্রগতি রিপোর্ট করে (যেমন, সার্ভার-সেন্ট ইভেন্ট বা ওয়েবসকেটের মাধ্যমে)।</p>

<h2>useFormStatus ব্যবহারের সেরা অনুশীলনসমূহ</h2>

<p><code>useFormStatus</code> কার্যকরভাবে ব্যবহার করতে এবং একটি শক্তিশালী ও ব্যবহারকারী-বান্ধব ফর্ম অভিজ্ঞতা তৈরি করতে, নিম্নলিখিত সেরা অনুশীলনগুলি বিবেচনা করুন:</p>

<ul>
  <li><b>স্পষ্ট ভিজ্যুয়াল ফিডব্যাক প্রদান করুন:</b> ফর্ম জমা দেওয়ার সময় সর্বদা ব্যবহারকারীকে ভিজ্যুয়াল ফিডব্যাক দিন, যেমন একটি লোডিং ইন্ডিকেটর, প্রোগ্রেস বার বা স্ট্যাটাস বার্তা।</li>
  <li><b>ত্রুটি সুন্দরভাবে পরিচালনা করুন:</b> জমা দেওয়ার ব্যর্থতা সনাক্ত করতে এবং রিপোর্ট করতে শক্তিশালী ত্রুটি ব্যবস্থাপনা প্রয়োগ করুন, ব্যবহারকারীকে তথ্যপূর্ণ ত্রুটির বার্তা প্রদান করুন।</li>
  <li><b>অ্যাক্সেসিবিলিটি বিবেচনা করুন:</b> নিশ্চিত করুন যে আপনার ফর্ম ইন্টারঅ্যাকশনগুলি প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য, উপযুক্ত ARIA অ্যাট্রিবিউট এবং কীবোর্ড নেভিগেশন সমর্থন প্রদান করে।</li>
  <li><b>পারফরম্যান্স অপ্টিমাইজ করুন:</b> কম্পোনেন্ট মেমোইজ করে এবং ডেটা ফেচিং অপ্টিমাইজ করে অপ্রয়োজনীয় রি-রেন্ডার এড়িয়ে চলুন।</li>
  <li><b>পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন:</b> আপনার ফর্ম ইন্টারঅ্যাকশনগুলি পুঙ্খানুপুঙ্খভাবে পরীক্ষা করে নিশ্চিত করুন যে সেগুলি বিভিন্ন পরিস্থিতিতে এবং পরিবেশে প্রত্যাশিতভাবে কাজ করে।</li>
</ul>

<h2>useFormStatus এবং সার্ভার অ্যাকশন</h2>

<p><code>useFormStatus</code> React সার্ভার অ্যাকশনের সাথে নির্বিঘ্নে কাজ করার জন্য ডিজাইন করা হয়েছে, যা সরাসরি সার্ভারে ফর্ম জমা দেওয়ার জন্য একটি শক্তিশালী বৈশিষ্ট্য। সার্ভার অ্যাকশনগুলি আপনাকে সার্ভার-সাইড ফাংশন সংজ্ঞায়িত করতে দেয় যা আপনার React কম্পোনেন্ট থেকে সরাসরি কল করা যেতে পারে, একটি পৃথক API এন্ডপয়েন্টের প্রয়োজন ছাড়াই।</p>

<p>সার্ভার অ্যাকশনের সাথে ব্যবহার করা হলে, <code>useFormStatus</code> স্বয়ংক্রিয়ভাবে অ্যাকশনের জমা দেওয়ার অবস্থা ট্র্যাক করে, ফর্ম ইন্টারঅ্যাকশনগুলি পরিচালনা করার একটি সহজ এবং সামঞ্জস্যপূর্ণ উপায় প্রদান করে।</p>

<h2>প্রচলিত ফর্ম হ্যান্ডলিং-এর সাথে তুলনা</h2>

<p><code>useFormStatus</code>-এর আগে, ডেভেলপাররা প্রায়শই ফর্ম জমা দেওয়ার জন্য ম্যানুয়াল স্টেট ম্যানেজমেন্ট এবং অ্যাসিঙ্ক্রোনাস অপারেশনের উপর নির্ভর করত। এই পদ্ধতিতে সাধারণত নিম্নলিখিত পদক্ষেপগুলি জড়িত ছিল:</p>

<ul>
  <li>জমা দেওয়ার অবস্থা ট্র্যাক করার জন্য একটি স্টেট ভ্যারিয়েবল তৈরি করা (যেমন, <code>isSubmitting</code>)।</li>
  <li>ফর্ম জমা দেওয়ার জন্য একটি ইভেন্ট হ্যান্ডলার লেখা।</li>
  <li>সার্ভারে একটি অ্যাসিঙ্ক্রোনাস অনুরোধ করা।</li>
  <li>সার্ভারের প্রতিক্রিয়া অনুযায়ী স্টেট আপডেট করা।</li>
  <li>ত্রুটি পরিচালনা করা এবং ত্রুটির বার্তা প্রদর্শন করা।</li>
</ul>

<p>এই পদ্ধতিটি কষ্টকর এবং ত্রুটিপ্রবণ হতে পারে, বিশেষ করে একাধিক ক্ষেত্র এবং বৈধতা নিয়মসহ জটিল ফর্মের জন্য। <code>useFormStatus</code> ফর্ম জমা দেওয়ার অবস্থা পরিচালনা করার একটি ডিক্লারেটিভ এবং কেন্দ্রীভূত উপায় প্রদান করে এই প্রক্রিয়াটিকে সহজ করে।</p>

<h2>বাস্তব-জগতের উদাহরণ এবং ব্যবহার</h2>

<p><code>useFormStatus</code> বাস্তব-জগতের বিভিন্ন পরিস্থিতিতে প্রয়োগ করা যেতে পারে, যার মধ্যে রয়েছে:</p>

<ul>
  <li><b>ই-কমার্স চেকআউট ফর্ম:</b> পেমেন্ট তথ্য প্রক্রিয়াকরণের সময় একটি লোডিং ইন্ডিকেটর প্রদর্শন করা।</li>
  <li><b>ব্যবহারকারী নিবন্ধন ফর্ম:</b> ব্যবহারকারীর ইনপুট যাচাই করা এবং অ্যাকাউন্ট তৈরি পরিচালনা করা।</li>
  <li><b>কন্টেন্ট ম্যানেজমেন্ট সিস্টেম:</b> আর্টিকেল, ব্লগ পোস্ট এবং অন্যান্য কন্টেন্ট জমা দেওয়া।</li>
  <li><b>সোশ্যাল মিডিয়া প্ল্যাটফর্ম:</b> মন্তব্য পোস্ট করা, পোস্টে লাইক দেওয়া এবং কন্টেন্ট শেয়ার করা।</li>
  <li><b>আর্থিক অ্যাপ্লিকেশন:</b> লেনদেন প্রক্রিয়া করা, অ্যাকাউন্ট পরিচালনা করা এবং রিপোর্ট তৈরি করা।</li>
</ul>

<h2>উপসংহার</h2>

<p>React-এর <code>useFormStatus</code> হুক আধুনিক ওয়েব অ্যাপ্লিকেশনগুলিতে ফর্ম জমা দেওয়ার অগ্রগতি পরিচালনা এবং ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য একটি মূল্যবান টুল। ফর্ম স্টেট ম্যানেজমেন্টকে সহজ করে, ত্রুটি হ্যান্ডলিং উন্নত করে এবং একটি ডিক্লারেটিভ অ্যাপ্রোচ প্রদান করে, <code>useFormStatus</code> ডেভেলপারদের আরও আকর্ষক এবং প্রতিক্রিয়াশীল ফর্ম ইন্টারঅ্যাকশন তৈরি করতে সক্ষম করে। এর কার্যকারিতা, ব্যবহারের ক্ষেত্র এবং সেরা অনুশীলনগুলি বোঝার মাধ্যমে, আপনি আজকের ওয়েব ডেভেলপমেন্টের চাহিদা মেটাতে পারে এমন শক্তিশালী এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে <code>useFormStatus</code> ব্যবহার করতে পারেন।</p>

<p>আপনি যখন <code>useFormStatus</code> অন্বেষণ করবেন, তখন অ্যাক্সেসিবিলিটি, পারফরম্যান্স অপ্টিমাইজেশন এবং পুঙ্খানুপুঙ্খ পরীক্ষা বিবেচনা করতে ভুলবেন না যাতে আপনার ফর্মগুলি বিশ্বব্যাপী দর্শকদের জন্য কার্যকরী এবং ব্যবহারকারী-বান্ধব হয়। এই নীতিগুলি প্রয়োগ করে, আপনি এমন ফর্ম ইন্টারঅ্যাকশন তৈরি করতে পারেন যা নির্বিঘ্ন, তথ্যপূর্ণ এবং আকর্ষক, যা শেষ পর্যন্ত একটি উন্নত সামগ্রিক ব্যবহারকারীর অভিজ্ঞতায় অবদান রাখে।</p>

<p>এই নিবন্ধটি <code>useFormStatus</code>-এর একটি বিশদ বিবরণ প্রদান করেছে। সবচেয়ে আপ-টু-ডেট তথ্য এবং API বিশদ বিবরণের জন্য অফিসিয়াল React ডকুমেন্টেশন দেখতে ভুলবেন না। হ্যাপি কোডিং!</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">রিঅ্যাক্ট</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফর্ম সাবমিশন</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফর্মের অগ্রগতি</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">পেন্ডিং অবস্থা</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ত্রুটি ব্যবস্থাপনা</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">রিঅ্যাক্ট হুকস</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ওয়েব ডেভেলপমেন্ট</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফ্রন্ট-এন্ড ডেভেলপমেন্ট</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ব্যবহারকারীর অভিজ্ঞতা</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UX</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>